class PromptManager {
  constructor() {
    this.prompts = [];
    this.filteredPrompts = [];
    this.currentPage = 1;
    this.itemsPerPage = 16; // 初始值，会在init中动态计算
    this.searchQuery = '';
    this.editingPromptId = null;
    this.currentTab = 'all'; // 'all' 或 'favorite'
    
    // 网格布局相关属性
    this.gridColumns = 0; // 网格列数
    this.gridRows = 0; // 网格行数
    this.containerWidth = 0; // 容器宽度
    this.cardWidth = 0; // 卡片宽度
    
    // 服务端相关属性
    this.serverOnline = true; // 假设服务器始终在线
    this.totalPages = 0; // 总页数
    this.totalCount = 0; // 总记录数
    
    // 防抖相关
    this.searchTimeout = null;
    this.searchDebounceDelay = 500; // 500ms防抖延迟
    
    this.init();
  }

  async init() {
    console.log('🚀 PromptManager 初始化开始...');
    
    // 1. 计算网格布局
    this.calculateGridLayout();
    console.log(`📊 初始布局: ${this.gridColumns}列 x ${this.gridRows}行 = ${this.itemsPerPage}项/页`);
    
    // 2. 加载服务端数据
    await this.loadServerData();
    
    // 3. 渲染界面
    this.render();
    this.bindEvents();
    
    // 4. 监听窗口大小变化
    this.setupResizeListener();
    
    console.log('✅ PromptManager 初始化完成');
  }

  // 加载服务端数据
  async loadServerData() {
    try {
      console.log('🔄 开始加载服务端数据...');
      
      
      // 构建查询参数
      const params = new URLSearchParams({
        page: this.currentPage,
        per_page: this.itemsPerPage
      });
      
      // 添加搜索参数
      if (this.searchQuery) {
        params.append('search', this.searchQuery);
      }
      
      // 添加标签页过滤参数
      if (this.currentTab === 'favorite') {
        params.append('favorite', 'true');
      }
      
      console.log('🌐 正在从服务端获取数据...', params.toString());
      const response = await fetch(`${CONFIG.getApiBaseUrl()}/prompts?${params.toString()}`);
      console.log(`📡 服务端响应状态: ${response.status} ${response.statusText}`);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const result = await response.json();
      console.log('📊 服务端返回数据:', result);
      
      if (result.success && result.data && result.data.prompts) {
        // 将服务端数据转换为本地格式
        this.prompts = result.data.prompts.map(serverPrompt => ({
          id: serverPrompt.chrome_id,
          dbId: serverPrompt.id,  // 保存数据库ID用于API调用
          text: serverPrompt.text,
          image: serverPrompt.image_data ? `${CONFIG.getServerBaseUrl()}${serverPrompt.image_data}` : null,
          originalImage: serverPrompt.original_image ? `${CONFIG.getServerBaseUrl()}${serverPrompt.original_image}` : null,
          source: serverPrompt.source,
          isFavorite: serverPrompt.is_favorite,
          timestamp: serverPrompt.created_at,
          lastUpdated: serverPrompt.updated_at
        }));
        
        // 更新分页信息
        if (result.data.pagination) {
          this.totalPages = result.data.pagination.pages;
          this.totalCount = result.data.pagination.total;
        }
        
        // 服务端已经处理了分页和过滤，直接使用返回的数据
        
        console.log(`✅ 成功加载 ${this.prompts.length} 条服务端数据`);
        console.log('📊 分页信息:', result.data.pagination);
      } else {
        console.log('⚠️ 服务端无数据或返回格式错误');
        console.log('📊 服务端返回结果:', result);
        this.prompts = [];
      }
    } catch (error) {
      console.error('❌ 加载服务端数据失败:', error);
      console.error('❌ 错误详情:', error.message);
      this.prompts = [];
    }
  }


  // 计算网格布局
  calculateGridLayout() {
    try {
      // 获取容器元素
      const container = document.getElementById('promptsContainer');
      if (!container) {
        console.log('⚠️ 容器元素未找到，使用默认布局');
        this.gridColumns = 8;
        this.gridRows = 2;
        this.itemsPerPage = this.gridColumns * this.gridRows;
        return;
      }

      // 获取视口尺寸
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      console.log(`📐 视口尺寸: ${viewportWidth}x${viewportHeight}px`);

      // 计算可用区域
      const headerHeight = 80; // 头部高度
      const searchHeight = 80; // 搜索栏高度
      const paginationHeight = 80; // 分页高度
      const padding = 40; // 内边距
      
      const availableWidth = viewportWidth - padding;
      const availableHeight = viewportHeight - headerHeight - searchHeight - paginationHeight - padding;
      
      console.log(`📐 可用区域: ${availableWidth}x${availableHeight}px`);

      // 设置卡片尺寸（固定尺寸，便于计算）
      const cardWidth = 300; // 固定卡片宽度
      const cardHeight = 280; // 固定卡片高度
      const gridGap = 15; // 网格间距
      
      // 计算列数
      this.gridColumns = Math.floor((availableWidth + gridGap) / (cardWidth + gridGap));
      if (this.gridColumns < 1) this.gridColumns = 1;
      if (this.gridColumns > 12) this.gridColumns = 12; // 最大12列

      // 计算行数
      this.gridRows = Math.floor((availableHeight + gridGap) / (cardHeight + gridGap));
      if (this.gridRows < 2) this.gridRows = 2; // 最少2行
      if (this.gridRows > 8) this.gridRows = 8; // 最多8行

      // 计算每页项目数
      this.itemsPerPage = this.gridColumns * this.gridRows;

      console.log(`📊 网格布局计算完成:`);
      console.log(`  - 视口尺寸: ${viewportWidth}x${viewportHeight}px`);
      console.log(`  - 可用区域: ${availableWidth}x${availableHeight}px`);
      console.log(`  - 卡片尺寸: ${cardWidth}x${cardHeight}px`);
      console.log(`  - 网格间距: ${gridGap}px`);
      console.log(`  - 网格列数: ${this.gridColumns}`);
      console.log(`  - 网格行数: ${this.gridRows}`);
      console.log(`  - 每页项目数: ${this.itemsPerPage}`);

    } catch (error) {
      console.error('❌ 计算网格布局失败:', error);
      // 使用默认值
      this.gridColumns = 8;
      this.gridRows = 2;
      this.itemsPerPage = 16;
    }
  }

  // 设置窗口大小变化监听器
  setupResizeListener() {
    let resizeTimeout;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(async () => {
        console.log('🔄 窗口大小变化，重新计算布局...');
        const oldItemsPerPage = this.itemsPerPage;
        this.calculateGridLayout();
        
        // 如果每页数量发生变化，重新加载数据
        if (oldItemsPerPage !== this.itemsPerPage) {
          console.log(`🔄 每页数量变化: ${oldItemsPerPage} -> ${this.itemsPerPage}，重新加载数据...`);
          this.currentPage = 1; // 重置到第一页
          await this.reloadData();
        } else {
          // 如果每页数量没变，只重新渲染
          this.render();
        }
      }, 300); // 防抖，300ms后执行
    });
  }

  // 重新加载数据（用于搜索、分页、标签页切换）
  async reloadData() {
    console.log('🔄 重新加载数据...');
    await this.loadServerData();
    this.render();
  }

  render() {
    console.log('🔄 开始渲染界面...');
    console.log(`📊 当前数据状态: 总数据 ${this.prompts.length} 条`);
    
    const loading = document.getElementById('loading');
    const container = document.getElementById('promptsContainer');
    const emptyState = document.getElementById('emptyState');
    const pagination = document.getElementById('pagination');

    loading.style.display = 'none';

    if (this.prompts.length === 0) {
      console.log('📭 没有数据，显示空状态');
      container.style.display = 'none';
      pagination.style.display = 'none';
      emptyState.style.display = 'block';
      this.updateStats();
      return;
    }

    console.log(`📋 渲染 ${this.prompts.length} 条数据`);
    emptyState.style.display = 'none';
    container.style.display = 'grid';
    pagination.style.display = 'flex';

    this.renderPrompts();
    this.renderPagination();
    this.updateStats();
    console.log('✅ 界面渲染完成');
  }

  renderPrompts() {
    const container = document.getElementById('promptsContainer');

    // 设置网格布局样式
    container.style.gridTemplateColumns = `repeat(${this.gridColumns}, 1fr)`;
    container.style.gridTemplateRows = `repeat(${this.gridRows}, auto)`;
    container.style.gap = '15px';
    
    console.log(`🎨 设置网格布局: ${this.gridColumns}列 x ${this.gridRows}行`);

    // 服务端已经处理了分页，直接渲染所有返回的数据
    container.innerHTML = this.prompts.map(prompt => `
      <div class="prompt-card" data-id="${prompt.id}">
        <div class="image-container">
          <img src="${prompt.image}" alt="Prompt Image" class="prompt-image" data-image-src="${prompt.originalImage || prompt.image}">
          <div class="image-placeholder" style="display: none;">
            <span>图片加载失败</span>
          </div>
        </div>
        <div class="prompt-content">
          <div class="prompt-text" data-prompt-id="${prompt.id}" title="点击复制提示词">
            ${this.escapeHtml(prompt.text)}
          </div>
          <div class="prompt-time">
            ${this.formatTime(prompt.lastUpdated || prompt.timestamp)}
          </div>
          <div class="prompt-actions">
            <div class="prompt-actions-left">
              <button class="copy-btn" data-prompt-id="${prompt.id}">复制</button>
              <button class="edit-btn" data-prompt-id="${prompt.id}">编辑</button>
              <button class="favorite-btn ${prompt.isFavorite ? 'favorited' : ''}" data-prompt-id="${prompt.id}" title="${prompt.isFavorite ? '取消收藏' : '添加收藏'}">
                ${prompt.isFavorite ? '❤️' : '🤍'}
              </button>
            </div>
            <div class="prompt-actions-right">
              <button class="delete-btn" data-prompt-id="${prompt.id}">删除</button>
            </div>
          </div>
        </div>
      </div>
    `).join('');
    
    // 处理图片加载事件
    this.setupImageHandlers();
    
    // 文件输入处理 - 使用事件委托
    document.addEventListener('change', (e) => {
      if (e.target.id === 'fileInput') {
        console.log('📁 文件输入变化事件触发!');
        console.log('📁 文件列表:', e.target.files);
        console.log('📁 文件数量:', e.target.files.length);
        if (e.target.files && e.target.files.length > 0) {
          this.handleFileUpload(e.target.files);
        } else {
          console.log('⚠️ 没有选择文件');
        }
      }
    });
    
    // 延迟检查文件输入元素
    setTimeout(() => {
      const fileInput = document.getElementById('fileInput');
      console.log('📁 检查文件输入元素:', fileInput);
      if (fileInput) {
        console.log('✅ 文件输入元素存在');
      } else {
        console.error('❌ 找不到文件输入元素');
      }
    }, 100);
    
    
    // 搜索输入实时处理（带防抖）
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
      searchInput.addEventListener('input', () => {
        this.handleSearchInput();
      });
    }
    
    console.log('✅ 事件绑定完成');
  }

  renderPagination() {
    const pagination = document.getElementById('pagination');

    if (this.totalPages <= 1) {
      pagination.style.display = 'none';
      return;
    }

    let paginationHTML = '';

    // 上一页按钮
    paginationHTML += `
      <button ${this.currentPage === 1 ? 'disabled' : ''} data-page="${this.currentPage - 1}" class="page-btn">
        上一页
      </button>
    `;

    // 页码按钮
    const startPage = Math.max(1, this.currentPage - 2);
    const endPage = Math.min(this.totalPages, this.currentPage + 2);

    if (startPage > 1) {
      paginationHTML += `<button data-page="1" class="page-btn">1</button>`;
      if (startPage > 2) {
        paginationHTML += `<span>...</span>`;
      }
    }

    for (let i = startPage; i <= endPage; i++) {
      const isCurrent = i === this.currentPage;
      paginationHTML += `
        <button class="page-btn ${isCurrent ? 'current-page' : ''}" data-page="${i}">
          ${i}
        </button>
      `;
    }

    if (endPage < this.totalPages) {
      if (endPage < this.totalPages - 1) {
        paginationHTML += `<span>...</span>`;
      }
      paginationHTML += `<button data-page="${this.totalPages}" class="page-btn">${this.totalPages}</button>`;
    }

    // 下一页按钮
    paginationHTML += `
      <button ${this.currentPage === this.totalPages ? 'disabled' : ''} data-page="${this.currentPage + 1}" class="page-btn">
        下一页
      </button>
    `;

    // 跳转输入框
    paginationHTML += `
      <span>跳转到</span>
      <input type="number" class="page-input" id="pageInput" min="1" max="${this.totalPages}" value="${this.currentPage}">
      <button id="jumpBtn" class="page-btn">跳转</button>
    `;

    // 每页数量设置
    paginationHTML += `
        <span>每页</span>
        <select id="perPageSelect" class="per-page-select">
          <option value="16" ${this.itemsPerPage === 16 ? 'selected' : ''}>16</option>
          <option value="20" ${this.itemsPerPage === 20 ? 'selected' : ''}>20</option>
          <option value="24" ${this.itemsPerPage === 24 ? 'selected' : ''}>24</option>
          <option value="32" ${this.itemsPerPage === 32 ? 'selected' : ''}>32</option>
          <option value="40" ${this.itemsPerPage === 40 ? 'selected' : ''}>40</option>
          <option value="48" ${this.itemsPerPage === 48 ? 'selected' : ''}>48</option>
          <option value="64" ${this.itemsPerPage === 64 ? 'selected' : ''}>64</option>
          <option value="96" ${this.itemsPerPage === 96 ? 'selected' : ''}>96</option>
        </select>
      <span>条</span>
      <span class="layout-info">(${this.gridColumns}×${this.gridRows})</span>
    `;

    pagination.innerHTML = paginationHTML;
  }

  updateStats() {
    // 统计信息现在只在分页区域显示
    console.log(`📊 当前页: ${this.currentPage}/${this.totalPages}, 总数据: ${this.totalCount}, 当前页数据: ${this.prompts.length}`);
  }

  async goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
      await this.reloadData();
    }
  }

  async jumpToPage() {
    const input = document.getElementById('pageInput');
    const page = parseInt(input.value);
    await this.goToPage(page);
  }

  // 改变每页数量
  async changePerPage(newPerPage) {
    if (newPerPage === this.itemsPerPage) {
      return; // 没有变化
    }
    
    console.log(`🔄 改变每页数量: ${this.itemsPerPage} -> ${newPerPage}`);
    
    // 更新每页数量
    this.itemsPerPage = newPerPage;
    
    // 重置到第一页
    this.currentPage = 1;
    
    // 重新加载数据
    await this.reloadData();
    
    console.log(`✅ 每页数量已更新为: ${newPerPage}`);
  }

  async copyPrompt(promptId) {
    const prompt = this.prompts.find(p => p.id == promptId);
    if (!prompt) return;

    try {
      await navigator.clipboard.writeText(prompt.text);
      this.showToast('提示词已复制到剪贴板', 'success');
    } catch (err) {
      // 降级方案
      const textArea = document.createElement('textarea');
      textArea.value = prompt.text;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      this.showToast('提示词已复制到剪贴板', 'success');
    }
  }

  async deletePrompt(promptId) {
    if (!confirm('确定要删除这个提示词吗？')) {
      return;
    }

    const prompt = this.prompts.find(p => p.id == promptId);
    if (!prompt) return;

    try {
      console.log('🌐 删除服务端数据...');
      const deleteResult = await this.deleteFromServer(prompt);
      if (deleteResult.success) {
        console.log('✅ 服务端数据删除成功');
        this.showToast('提示词已删除', 'success');
        
        // 检查当前页是否还有数据，如果没有则回到上一页
        const currentPageData = this.prompts.length;
        if (currentPageData <= 1 && this.currentPage > 1) {
          this.currentPage = this.currentPage - 1;
        }
        
        // 重新加载数据
        await this.reloadData();
      } else {
        console.log('❌ 服务端删除失败');
        this.showToast('删除失败: ' + deleteResult.error, 'error');
      }
    } catch (error) {
      console.error('❌ 删除提示词失败:', error);
      this.showToast('删除失败: ' + error.message, 'error');
    }
  }

  showFullImage(imageSrc) {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    modalImage.src = imageSrc;
    modal.style.display = 'block';
  }

  hideFullImage() {
    const modal = document.getElementById('imageModal');
    modal.style.display = 'none';
  }

  setupImageHandlers() {
    // 为所有图片设置加载和错误处理
    const images = document.querySelectorAll('.prompt-image');
    images.forEach(img => {
      img.addEventListener('load', () => {
        img.style.display = 'block';
        const placeholder = img.nextElementSibling;
        if (placeholder) {
          placeholder.style.display = 'none';
        }
      });
      
      img.addEventListener('error', () => {
        img.style.display = 'none';
        const placeholder = img.nextElementSibling;
        if (placeholder) {
          placeholder.style.display = 'flex';
        }
      });
    });
  }

  bindEvents() {
    console.log('🔗 开始绑定事件...');
    
    // 使用事件委托处理所有点击事件
    document.addEventListener('click', (e) => {
      const target = e.target;
      console.log('🖱️ 点击事件:', target.id, target.className);
      
      // 处理图片点击 - 显示全屏
      if (target.classList.contains('prompt-image')) {
        const imageSrc = target.getAttribute('data-image-src');
        if (imageSrc) {
          this.showFullImage(imageSrc);
        }
        return;
      }
      
      // 处理提示词文本点击 - 复制
      if (target.classList.contains('prompt-text')) {
        const promptId = target.getAttribute('data-prompt-id');
        if (promptId) {
          this.copyPrompt(promptId);
        }
        return;
      }
      
      // 处理复制按钮点击
      if (target.classList.contains('copy-btn')) {
        const promptId = target.getAttribute('data-prompt-id');
        if (promptId) {
          this.copyPrompt(promptId);
        }
        return;
      }
      
      // 处理删除按钮点击
      if (target.classList.contains('delete-btn')) {
        const promptId = target.getAttribute('data-prompt-id');
        if (promptId) {
          this.deletePrompt(promptId);
        }
        return;
      }
      
      // 处理分页按钮点击
      if (target.classList.contains('page-btn') && !target.disabled) {
        const page = target.getAttribute('data-page');
        if (page) {
          this.goToPage(parseInt(page));
        }
        return;
      }
      
      // 处理跳转按钮点击
      if (target.id === 'jumpBtn') {
        this.jumpToPage();
        return;
      }
      
      // 处理每页数量选择变化
      if (target.id === 'perPageSelect') {
        this.changePerPage(parseInt(target.value));
        return;
      }
      
      // 处理模态框关闭按钮
      if (target.id === 'modalClose') {
        this.hideFullImage();
        return;
      }
      
      
      // 导出Excel按钮
      if (target.id === 'exportBtn') {
        this.exportToExcel();
        return;
      }
      
      // 恢复数据按钮
      if (target.id === 'recoverBtn') {
        this.showToast('恢复功能暂未实现', 'info');
        return;
      }
      
      
      // 上传图片按钮
      if (target.id === 'uploadBtn') {
        console.log('📤 点击上传图片按钮');
        const fileInput = document.getElementById('fileInput');
        console.log('📁 文件输入元素:', fileInput);
        if (fileInput) {
          console.log('📁 触发文件选择对话框');
          fileInput.click();
        } else {
          console.error('❌ 找不到文件输入元素');
        }
        return;
      }
      
      // 编辑按钮
      if (target.classList.contains('edit-btn')) {
        const promptId = target.getAttribute('data-prompt-id');
        this.editPrompt(promptId);
        return;
      }
      
      // 收藏按钮
      if (target.classList.contains('favorite-btn')) {
        const promptId = target.getAttribute('data-prompt-id');
        this.toggleFavorite(promptId);
        return;
      }
      
      // 标签页按钮
      if (target.id === 'allTab' || target.classList.contains('tab-switch-btn')) {
        if (target.id === 'allTab') {
          this.switchTab('all');
        } else if (target.id === 'favoriteTab') {
          this.switchTab('favorite');
        }
        return;
      }
      
      // 搜索按钮
      if (target.id === 'searchBtn') {
        this.handleSearch();
        return;
      }
      
      // 搜索输入
      if (target.id === 'searchInput') {
        this.handleSearch();
        return;
      }
      
      // 清除搜索按钮
      if (target.id === 'clearSearchBtn') {
        this.clearSearch();
        return;
      }
      
      // 编辑模态框按钮
      if (target.id === 'saveEditBtn') {
        this.saveEdit();
        return;
      }
      
      if (target.id === 'cancelEditBtn' || target.id === 'editModalClose') {
        this.cancelEdit();
        return;
      }
    });

    // 模态框背景点击关闭
    const modal = document.getElementById('imageModal');
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        this.hideFullImage();
      }
    });

    // ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.hideFullImage();
      }
    });

    // 拖拽处理
    const contentContainer = document.querySelector('.content');
    if (contentContainer) {
      console.log('🎯 绑定拖拽事件');
      
      contentContainer.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log('🎯 拖拽悬停');
        contentContainer.classList.add('drag-over');
      });
      
      contentContainer.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log('🎯 拖拽离开');
        contentContainer.classList.remove('drag-over');
      });
      
      contentContainer.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log('🎯 拖拽放下:', e.dataTransfer);
        contentContainer.classList.remove('drag-over');
        
        // 检查是否有文件
        const files = e.dataTransfer.files;
        if (files && files.length > 0) {
          console.log('📁 检测到文件拖拽:', files.length, '个文件');
          this.handleFileUpload(files);
          return;
        }
        
        // 检查是否有URL数据（网络图片）
        const url = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain');
        if (url && this.isImageUrl(url)) {
          console.log('🌐 检测到网络图片拖拽:', url);
          this.handleNetworkImage(url);
          return;
        }
        
        // 检查是否有HTML数据（可能包含图片）
        const html = e.dataTransfer.getData('text/html');
        if (html) {
          console.log('📄 检测到HTML拖拽，尝试提取图片');
          const imageUrl = this.extractImageFromHtml(html);
          if (imageUrl) {
            console.log('🖼️ 从HTML中提取到图片:', imageUrl);
            this.handleNetworkImage(imageUrl);
            return;
          }
        }
        
        console.log('⚠️ 未识别的拖拽内容');
      });
    } else {
      console.error('❌ 找不到内容容器元素');
    }

    // 剪贴板粘贴处理
    document.addEventListener('paste', (e) => {
      console.log('📋 检测到粘贴事件');
      this.handleClipboardPaste(e);
    });
  }

  // 检查URL是否为图片
  isImageUrl(url) {
    if (!url) return false;
    
    // 检查URL是否以图片扩展名结尾
    const imageExtensions = /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i;
    if (imageExtensions.test(url)) {
      return true;
    }
    
    // 检查URL是否包含常见的图片服务域名
    const imageDomains = [
      'imgur.com', 'i.imgur.com',
      'flickr.com', 'staticflickr.com',
      'unsplash.com', 'images.unsplash.com',
      'pixabay.com', 'cdn.pixabay.com',
      'pexels.com', 'images.pexels.com',
      'googleusercontent.com',
      'amazonaws.com',
      'cloudfront.net'
    ];
    
    try {
      const urlObj = new URL(url);
      return imageDomains.some(domain => urlObj.hostname.includes(domain));
    } catch (e) {
      return false;
    }
  }

  // 从HTML中提取图片URL
  extractImageFromHtml(html) {
    try {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const img = doc.querySelector('img');
      return img ? img.src : null;
    } catch (e) {
      console.error('解析HTML失败:', e);
      return null;
    }
  }

  // 处理网络图片
  async handleNetworkImage(imageUrl) {
    try {
      console.log('🌐 开始处理网络图片:', imageUrl);
      this.showToast('正在下载网络图片...', 'info');
      
      // 下载图片并转换为Base64
      const response = await fetch(imageUrl);
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const blob = await response.blob();
      const reader = new FileReader();
      
      reader.onload = async () => {
        try {
          const base64Data = reader.result;
          console.log('✅ 网络图片下载完成，大小:', blob.size, 'bytes');
          
          // 创建提示词数据
          const newPrompt = {
            id: Date.now(),
            text: '从网络图片导入的提示词',
            image: base64Data,
            originalImage: imageUrl,
            timestamp: new Date().toISOString(),
            lastUpdated: new Date().toISOString(),
            source: 'network',
            isFavorite: false
          };
          
          console.log('📝 创建网络图片提示词:', newPrompt);
          
          // 直接保存到服务端
          console.log('🌐 保存网络图片到服务端...');
          const saveResult = await this.saveToServer(newPrompt);
          if (saveResult.success) {
            console.log('✅ 网络图片已成功保存到服务端');
            this.showToast('网络图片导入成功！', 'success');
            // 重新加载数据
            await this.reloadData();
          } else {
            console.log('❌ 保存网络图片失败:', saveResult.error);
            this.showToast('保存失败: ' + saveResult.error, 'error');
          }
        } catch (error) {
          console.error('❌ 处理网络图片失败:', error);
          this.showToast('处理网络图片失败: ' + error.message, 'error');
        }
      };
      
      reader.onerror = () => {
        console.error('❌ 读取图片数据失败');
        this.showToast('读取图片数据失败', 'error');
      };
      
      reader.readAsDataURL(blob);
      
    } catch (error) {
      console.error('❌ 下载网络图片失败:', error);
      this.showToast('下载网络图片失败: ' + error.message, 'error');
    }
  }

  // 处理剪贴板粘贴
  async handleClipboardPaste(e) {
    try {
      console.log('📋 处理剪贴板粘贴事件');
      
      // 获取剪贴板数据
      const clipboardData = e.clipboardData || window.clipboardData;
      if (!clipboardData) {
        console.log('⚠️ 无法访问剪贴板数据');
        return;
      }
      
      // 检查是否有图片数据
      const items = clipboardData.items;
      if (!items) {
        console.log('⚠️ 剪贴板中没有数据项');
        return;
      }
      
      let imageBlob = null;
      let imageType = null;
      
      // 遍历剪贴板项目
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        console.log(`📋 剪贴板项目 ${i}:`, item.type, item.kind);
        
        // 检查是否为图片类型
        if (item.type.startsWith('image/')) {
          imageBlob = item.getAsFile();
          imageType = item.type;
          console.log('🖼️ 找到图片数据:', imageType, imageBlob ? imageBlob.size : 'null');
          break;
        }
      }
      
      if (!imageBlob) {
        console.log('⚠️ 剪贴板中没有图片数据');
        return;
      }
      
      // 阻止默认粘贴行为
      e.preventDefault();
      
      console.log('✅ 开始处理剪贴板图片:', imageType, imageBlob.size, 'bytes');
      this.showToast('正在处理剪贴板图片...', 'info');
      
      // 将Blob转换为Base64
      const reader = new FileReader();
      
      reader.onload = async () => {
        try {
          const base64Data = reader.result;
          console.log('✅ 剪贴板图片转换完成');
          
          // 创建提示词数据
          const newPrompt = {
            id: Date.now(),
            text: '从剪贴板导入的提示词',
            image: base64Data,
            originalImage: null, // 剪贴板图片没有原始URL
            timestamp: new Date().toISOString(),
            lastUpdated: new Date().toISOString(),
            source: 'clipboard',
            isFavorite: false
          };
          
          console.log('📝 创建剪贴板图片提示词:', newPrompt);
          
          // 直接保存到服务端
          console.log('🌐 保存剪贴板图片到服务端...');
          const saveResult = await this.saveToServer(newPrompt);
          if (saveResult.success) {
            console.log('✅ 剪贴板图片已成功保存到服务端');
            this.showToast('剪贴板图片导入成功！', 'success');
            // 重新加载数据
            await this.reloadData();
          } else {
            console.log('❌ 保存剪贴板图片失败:', saveResult.error);
            this.showToast('保存失败: ' + saveResult.error, 'error');
          }
        } catch (error) {
          console.error('❌ 处理剪贴板图片失败:', error);
          this.showToast('处理剪贴板图片失败: ' + error.message, 'error');
        }
      };
      
      reader.onerror = () => {
        console.error('❌ 读取剪贴板图片数据失败');
        this.showToast('读取剪贴板图片数据失败', 'error');
      };
      
      reader.readAsDataURL(imageBlob);
      
    } catch (error) {
      console.error('❌ 处理剪贴板粘贴失败:', error);
      this.showToast('处理剪贴板粘贴失败: ' + error.message, 'error');
    }
  }

  showToast(message, type = 'info') {
    // 移除已存在的toast
    const existingToast = document.querySelector('.toast');
    if (existingToast) {
      existingToast.remove();
    }

    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = message;
    
    // 根据类型设置样式
    let backgroundColor = '#2196f3';
    if (type === 'success') {
      backgroundColor = '#4caf50';
    } else if (type === 'error') {
      backgroundColor = '#f44336';
    } else if (type === 'warning') {
      backgroundColor = '#ff9800';
    }
    
    toast.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: ${backgroundColor};
      color: white;
      padding: 12px 20px;
      border-radius: 6px;
      z-index: 10000;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    `;
    
    document.body.appendChild(toast);
    
    // 淡入效果
    setTimeout(() => {
      toast.style.opacity = '1';
    }, 10);
    
    // 自动消失
    setTimeout(() => {
      toast.style.opacity = '0';
      setTimeout(() => {
        if (toast.parentNode) {
          toast.parentNode.removeChild(toast);
        }
      }, 300);
    }, 2000);
  }

  escapeHtml(text) {
    if (!text) return '';
    
    // 去掉换行符，将多行文本转换为单行
    const singleLineText = text.replace(/[\r\n]+/g, ' ').trim();
    
    const div = document.createElement('div');
    div.textContent = singleLineText;
    return div.innerHTML;
  }


  // 导出Excel
  async exportToExcel() {
    try {
      const csvContent = this.createCSV(this.prompts);
      this.downloadCSV(csvContent, 'prompts.csv');
      this.showToast('数据导出成功！', 'success');
    } catch (error) {
      console.error('导出失败:', error);
      this.showToast('导出失败', 'error');
    }
  }

  // 创建CSV内容
  createCSV(prompts) {
    const headers = ['image', 'prompt'];
    const rows = prompts.map(prompt => [
      prompt.image || '',
      (prompt.text || '').replace(/"/g, '""')
    ]);
    
    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
    ].join('\n');
    
    return csvContent;
  }

  // 下载CSV文件
  downloadCSV(content, filename) {
    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  // 格式化时间
  formatTime(timestamp) {
    if (!timestamp) return '未知时间';
    const date = new Date(timestamp);
    const now = new Date();
    const diff = now - date;
    
    if (diff < 60000) { // 1分钟内
      return '刚刚';
    } else if (diff < 3600000) { // 1小时内
      return `${Math.floor(diff / 60000)}分钟前`;
    } else if (diff < 86400000) { // 1天内
      return `${Math.floor(diff / 3600000)}小时前`;
    } else if (diff < 604800000) { // 1周内
      return `${Math.floor(diff / 86400000)}天前`;
    } else {
      return date.toLocaleDateString();
    }
  }

  // 处理文件上传
  async handleFileUpload(files) {
    console.log('🚀 handleFileUpload 方法被调用!');
    console.log('📤 开始处理文件上传:', files);
    
    if (!files || files.length === 0) {
      console.log('❌ 没有文件需要处理');
      return;
    }
    
    console.log(`📊 共收到 ${files.length} 个文件`);
    this.showToast(`开始处理 ${files.length} 个图片...`, 'info');
    
    let successCount = 0;
    let errorCount = 0;
    
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      console.log(`📁 处理文件 ${i + 1}/${files.length}:`, file.name, file.type, file.size);
      
      if (!file.type.startsWith('image/')) {
        console.log(`⚠️ 文件 ${file.name} 不是图片格式:`, file.type);
        this.showToast(`文件 ${file.name} 不是图片格式`, 'warning');
        errorCount++;
        continue;
      }
      
      try {
        console.log(`🔄 开始处理图片: ${file.name}`);
        await this.processImageFile(file);
        successCount++;
        console.log(`✅ 图片处理成功: ${file.name}`);
      } catch (error) {
        console.error(`❌ 处理图片失败: ${file.name}`, error);
        this.showToast(`处理图片 ${file.name} 失败: ${error.message}`, 'error');
        errorCount++;
      }
    }
    
         console.log(`📊 处理完成 - 成功: ${successCount}, 失败: ${errorCount}`);
     this.showToast(`图片处理完成！成功: ${successCount}, 失败: ${errorCount}`, 'success');
  }

  // 处理单个图片文件
  async processImageFile(file) {
    console.log(`🔄 开始处理图片文件: ${file.name}`);
    
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      
      reader.onload = async (e) => {
        try {
          console.log(`📖 文件读取完成: ${file.name}`);
          const originalImageDataUrl = e.target.result;
          console.log(`🖼️ 原始图片数据URL长度: ${originalImageDataUrl.length}`);
          
          console.log(`🔍 开始提取提示词信息...`);
          const promptData = await this.extractPromptFromImage(originalImageDataUrl);
          console.log(`📝 提取到的提示词数据:`, promptData);
          
          console.log(`🖼️ 开始生成缩略图...`);
          const thumbnailDataUrl = await this.generateThumbnail(originalImageDataUrl);
          console.log(`📸 缩略图生成完成，数据长度: ${thumbnailDataUrl.length}`);
          
                     const newPrompt = {
             id: Date.now() + Math.random(),
             text: promptData.text || '无提示词',
             image: thumbnailDataUrl, // 使用缩略图而不是原图
             originalImage: originalImageDataUrl, // 保存原图用于显示
             timestamp: new Date().toISOString(),
             lastUpdated: new Date().toISOString(),
             source: 'upload',
             isFavorite: false
           };
          
          console.log(`📋 创建的新提示词对象:`, {
            id: newPrompt.id,
            text: newPrompt.text.substring(0, 100) + (newPrompt.text.length > 100 ? '...' : ''),
            timestamp: newPrompt.timestamp,
            source: newPrompt.source
          });
          
                     // 服务端会处理重复检查，这里直接保存
          
                     // 直接保存到服务端
           console.log('🌐 直接保存到服务端...');
           const saveResult = await this.saveToServer(newPrompt);
           if (saveResult.success) {
             console.log('✅ 数据已直接保存到服务端');
             // 重新加载数据以获取最新的服务端数据
             await this.reloadData();
           } else {
             console.log('⚠️ 服务端保存失败');
             this.showToast('保存失败: ' + saveResult.error, 'error');
           }
          
          resolve();
        } catch (error) {
          console.error(`❌ 处理图片文件失败: ${file.name}`, error);
          reject(error);
        }
      };
      
      reader.onerror = (error) => {
        console.error(`❌ 文件读取失败: ${file.name}`, error);
        reject(error);
      };
      
      console.log(`📖 开始读取文件: ${file.name}`);
      reader.readAsDataURL(file);
    });
  }

  // 生成缩略图
  async generateThumbnail(imageDataUrl, maxWidth = 300, maxHeight = 300, quality = 0.7) {
    console.log(`🖼️ 开始生成缩略图，目标尺寸: ${maxWidth}x${maxHeight}, 质量: ${quality}`);
    
    return new Promise((resolve, reject) => {
      const img = new Image();
      
      img.onload = () => {
        try {
          console.log(`📐 原图尺寸: ${img.width}x${img.height}`);
          
          // 计算缩略图尺寸，保持宽高比
          let { width, height } = this.calculateThumbnailSize(img.width, img.height, maxWidth, maxHeight);
          console.log(`📏 缩略图尺寸: ${width}x${height}`);
          
          // 创建canvas
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = width;
          canvas.height = height;
          
          // 绘制缩略图
          ctx.drawImage(img, 0, 0, width, height);
          
          // 转换为base64，使用JPEG格式以减小文件大小
          const thumbnailDataUrl = canvas.toDataURL('image/jpeg', quality);
          console.log(`✅ 缩略图生成完成，数据长度: ${thumbnailDataUrl.length}`);
          
          resolve(thumbnailDataUrl);
        } catch (error) {
          console.error('❌ 生成缩略图失败:', error);
          reject(error);
        }
      };
      
      img.onerror = (error) => {
        console.error('❌ 图片加载失败:', error);
        reject(error);
      };
      
      img.src = imageDataUrl;
    });
  }

  // 计算缩略图尺寸，保持宽高比
  calculateThumbnailSize(originalWidth, originalHeight, maxWidth, maxHeight) {
    let width = originalWidth;
    let height = originalHeight;
    
    // 如果原图尺寸小于最大尺寸，直接返回原尺寸
    if (width <= maxWidth && height <= maxHeight) {
      return { width, height };
    }
    
    // 计算缩放比例
    const widthRatio = maxWidth / width;
    const heightRatio = maxHeight / height;
    const ratio = Math.min(widthRatio, heightRatio);
    
    width = Math.floor(width * ratio);
    height = Math.floor(height * ratio);
    
    return { width, height };
  }

  // 从图片中提取提示词
  async extractPromptFromImage(imageDataUrl) {
    console.log('🔍 开始从图片中提取提示词...');
    
    return new Promise((resolve) => {
      const img = new Image();
      
      img.onload = () => {
        try {
          console.log(`🖼️ 图片加载完成，尺寸: ${img.width}x${img.height}`);
          
          // 创建canvas来读取图片数据
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
          
          console.log('🎨 Canvas创建完成，开始解析元数据...');
          
          // 尝试读取PNG元数据
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const promptData = this.parsePNGMetadata(imageDataUrl);
          
          console.log('📊 元数据解析结果:', promptData);
          resolve(promptData);
        } catch (error) {
          console.error('❌ 解析图片元数据失败:', error);
          resolve({ text: null });
        }
      };
      
      img.onerror = (error) => {
        console.error('❌ 图片加载失败:', error);
        resolve({ text: null });
      };
      
      console.log('🖼️ 开始加载图片...');
      img.src = imageDataUrl;
    });
  }

  // 解析PNG元数据
  parsePNGMetadata(imageDataUrl) {
    console.log('🔍 开始解析PNG元数据...');
    
    try {
      // 对于ComfyUI生成的PNG，提示词通常存储在tEXt块中
      // 这里我们尝试从base64数据中提取
      const base64Data = imageDataUrl.split(',')[1];
      console.log(`📊 Base64数据长度: ${base64Data.length}`);
      
      const binaryString = atob(base64Data);
      console.log(`📊 二进制字符串长度: ${binaryString.length}`);
      
      // 查找ComfyUI相关的元数据
      const comfyUIPatterns = [
        { name: 'prompt', pattern: /"prompt":\s*"([^"]+)"/g },
        { name: 'workflow', pattern: /"workflow":\s*"([^"]+)"/g },
        { name: 'positive', pattern: /"positive":\s*"([^"]+)"/g },
        { name: 'negative', pattern: /"negative":\s*"([^"]+)"/g }
      ];
      
      let extractedText = '';
      let foundPatterns = [];
      
      console.log('🔍 搜索ComfyUI格式的元数据...');
      for (const { name, pattern } of comfyUIPatterns) {
        let match;
        let matchCount = 0;
        while ((match = pattern.exec(binaryString)) !== null) {
          if (match[1]) {
            console.log(`✅ 找到${name}元数据:`, match[1].substring(0, 100) + (match[1].length > 100 ? '...' : ''));
            extractedText += match[1] + ' ';
            matchCount++;
          }
        }
        if (matchCount > 0) {
          foundPatterns.push(`${name}(${matchCount})`);
        }
      }
      
      console.log(`📊 ComfyUI格式搜索结果: ${foundPatterns.join(', ') || '无'}`);
      
      // 如果没有找到ComfyUI格式，尝试查找其他常见格式
      if (!extractedText) {
        console.log('🔍 搜索通用格式的元数据...');
        const generalPatterns = [
          { name: 'text', pattern: /"text":\s*"([^"]+)"/g },
          { name: 'description', pattern: /"description":\s*"([^"]+)"/g },
          { name: 'caption', pattern: /"caption":\s*"([^"]+)"/g }
        ];
        
        for (const { name, pattern } of generalPatterns) {
          let match;
          let matchCount = 0;
          while ((match = pattern.exec(binaryString)) !== null) {
            if (match[1]) {
              console.log(`✅ 找到${name}元数据:`, match[1].substring(0, 100) + (match[1].length > 100 ? '...' : ''));
              extractedText += match[1] + ' ';
              matchCount++;
            }
          }
          if (matchCount > 0) {
            foundPatterns.push(`${name}(${matchCount})`);
          }
        }
        
        console.log(`📊 通用格式搜索结果: ${foundPatterns.join(', ') || '无'}`);
      }
      
      const result = {
        text: extractedText.trim() || null
      };
      
      console.log(`📝 最终提取结果:`, {
        hasText: !!result.text,
        textLength: result.text ? result.text.length : 0,
        textPreview: result.text ? result.text.substring(0, 200) + (result.text.length > 200 ? '...' : '') : null
      });
      
      return result;
    } catch (error) {
      console.error('❌ 解析PNG元数据失败:', error);
      return { text: null };
    }
  }

  // 搜索输入处理（防抖）
  handleSearchInput() {
    // 清除之前的定时器
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout);
    }
    
    // 立即更新清除按钮的显示状态
    const searchInput = document.getElementById('searchInput');
    const clearBtn = document.getElementById('clearSearchBtn');
    if (searchInput && clearBtn) {
      const query = searchInput.value.trim();
      if (query) {
        clearBtn.style.display = 'block';
        // 显示搜索状态提示
        this.showSearchStatus('正在搜索...', 'info');
      } else {
        clearBtn.style.display = 'none';
      }
    }
    
    // 设置新的定时器
    this.searchTimeout = setTimeout(() => {
      this.handleSearch();
    }, this.searchDebounceDelay);
  }

  // 搜索功能
  async handleSearch() {
    const searchInput = document.getElementById('searchInput');
    const clearBtn = document.getElementById('clearSearchBtn');
    this.searchQuery = searchInput.value.trim();
    
    if (this.searchQuery) {
      clearBtn.style.display = 'block';
    } else {
      clearBtn.style.display = 'none';
    }
    
    this.currentPage = 1;
    
    try {
      await this.reloadData();
      
      // 搜索完成后显示结果状态
      if (this.searchQuery) {
        const resultCount = this.prompts.length;
        if (resultCount > 0) {
          this.showSearchStatus(`找到 ${resultCount} 条结果`, 'success');
        } else {
          this.showSearchStatus('未找到匹配的结果', 'error');
        }
      }
    } catch (error) {
      console.error('❌ 搜索失败:', error);
      this.showSearchStatus('搜索失败，请重试', 'error');
    }
  }

  // 显示搜索状态
  showSearchStatus(message, type = 'info') {
    // 移除已存在的状态提示
    const existingStatus = document.querySelector('.search-status');
    if (existingStatus) {
      existingStatus.remove();
    }

    const status = document.createElement('div');
    status.className = 'search-status';
    status.textContent = message;
    
    // 根据类型设置样式
    const colors = {
      info: '#2196f3',
      success: '#4caf50',
      error: '#f44336'
    };
    
    status.style.cssText = `
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: ${colors[type] || colors.info};
      color: white;
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 1000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(status);
    
    // 淡入效果
    setTimeout(() => {
      status.style.opacity = '1';
    }, 10);
    
    // 自动消失
    setTimeout(() => {
      status.style.opacity = '0';
      setTimeout(() => {
        if (status.parentNode) {
          status.parentNode.removeChild(status);
        }
      }, 300);
    }, 1000);
  }

  // 清除搜索
  async clearSearch() {
    // 清除防抖定时器
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout);
      this.searchTimeout = null;
    }
    
    const searchInput = document.getElementById('searchInput');
    const clearBtn = document.getElementById('clearSearchBtn');
    
    searchInput.value = '';
    clearBtn.style.display = 'none';
    this.searchQuery = '';
    this.currentPage = 1;
    await this.reloadData();
  }

  // 编辑提示词
  editPrompt(promptId) {
    const prompt = this.prompts.find(p => p.id == promptId);
    if (!prompt) return;
    
    this.editingPromptId = promptId;
    const editModal = document.getElementById('editModal');
    const editTextarea = document.getElementById('editPromptText');
    
    editTextarea.value = prompt.text;
    editModal.style.display = 'block';
    editTextarea.focus();
  }

  // 保存编辑
  async saveEdit() {
    if (!this.editingPromptId) return;
    
    const editTextarea = document.getElementById('editPromptText');
    const newText = editTextarea.value.trim();
    
    if (!newText) {
      this.showToast('提示词不能为空', 'warning');
      return;
    }
    
    const prompt = this.prompts.find(p => p.id == this.editingPromptId);
    if (prompt) {
      try {
        console.log('🌐 更新提示词到服务端...');
        const updateResult = await this.updateToServer(prompt, { text: newText });
        if (updateResult.success) {
          console.log('✅ 提示词更新成功');
          this.showToast('提示词更新成功！', 'success');
          // 重新加载数据
          await this.reloadData();
        } else {
          this.showToast('更新失败: ' + updateResult.error, 'error');
        }
      } catch (error) {
        console.error('❌ 更新提示词失败:', error);
        this.showToast('更新失败: ' + error.message, 'error');
      }
    }
    
    this.cancelEdit();
  }

  // 取消编辑
  cancelEdit() {
    this.editingPromptId = null;
    const editModal = document.getElementById('editModal');
    const editTextarea = document.getElementById('editPromptText');
    
    editModal.style.display = 'none';
    editTextarea.value = '';
  }

  // 切换收藏状态
  async toggleFavorite(promptId) {
    const prompt = this.prompts.find(p => p.id == promptId);
    if (!prompt) return;
    
    const newFavorite = !prompt.isFavorite;
    
    try {
      console.log('🌐 更新收藏状态到服务端...');
      const updateResult = await this.updateToServer(prompt, { is_favorite: newFavorite });
      if (updateResult.success) {
        console.log('✅ 收藏状态更新成功');
        const message = newFavorite ? '已添加到收藏' : '已取消收藏';
        this.showToast(message, 'success');
        // 重新加载数据
        await this.reloadData();
      } else {
        this.showToast('收藏状态更新失败: ' + updateResult.error, 'error');
      }
    } catch (error) {
      console.error('❌ 更新收藏状态失败:', error);
      this.showToast('收藏状态更新失败: ' + error.message, 'error');
    }
  }

  // 切换标签页
  async switchTab(tab) {
    console.log('🔄 切换标签页:', tab);
    
    // 更新标签页状态
    this.currentTab = tab;
    
    // 更新标签页按钮样式
    document.querySelectorAll('.tab-switch-btn').forEach(btn => {
      btn.classList.remove('active');
    });
    
    // 更新按钮状态
    const allTab = document.getElementById('allTab');
    const favoriteTab = document.getElementById('favoriteTab');
    
    if (tab === 'all') {
      allTab.classList.add('active');
      favoriteTab.classList.remove('active');
    } else if (tab === 'favorite') {
      allTab.classList.remove('active');
      favoriteTab.classList.add('active');
    }
    
    // 重新加载数据
    this.currentPage = 1;
    await this.reloadData();
  }




  // 直接更新数据到服务端
  async updateToServer(prompt, updateData = null) {
    try {
      console.log('🌐 直接更新数据到服务端...');
      
      // 构建更新数据
      const serverData = updateData || {
        text: prompt.text,
        is_favorite: prompt.isFavorite
      };
      
      console.log('📤 发送更新数据到服务端:', serverData);
      
      // 使用数据库ID而不是Chrome ID
      const dbId = prompt.dbId || prompt.id;
      const response = await fetch(`${CONFIG.getApiBaseUrl()}/prompts/${dbId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(serverData)
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const result = await response.json();
      console.log('📊 服务端更新结果:', result);
      
      if (result.success) {
        console.log('✅ 数据已成功更新到服务端');
        return { success: true, data: result.data };
      } else {
        console.log('❌ 服务端更新失败:', result.error);
        return { success: false, error: result.error };
      }
    } catch (error) {
      console.error('❌ 更新到服务端失败:', error);
      return { success: false, error: error.message };
    }
  }

  // 从服务端删除数据
  async deleteFromServer(prompt) {
    try {
      console.log('🌐 从服务端删除数据...');
      
      // 使用数据库ID而不是Chrome ID
      const dbId = prompt.dbId || prompt.id;
      const response = await fetch(`${CONFIG.getApiBaseUrl()}/prompts/${dbId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        }
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const result = await response.json();
      console.log('📊 服务端删除结果:', result);
      
      if (result.success) {
        console.log('✅ 数据已成功从服务端删除');
        return { success: true };
      } else {
        console.log('❌ 服务端删除失败:', result.error);
        return { success: false, error: result.error };
      }
    } catch (error) {
      console.error('❌ 从服务端删除失败:', error);
      return { success: false, error: error.message };
    }
  }

  // 直接保存数据到服务端
  async saveToServer(prompt) {
    try {
      console.log('🌐 直接保存数据到服务端...');
      
      // 将本地数据格式转换为服务端格式
      const serverData = {
        chrome_id: prompt.id.toString(),
        text: prompt.text,
        image_data: prompt.image,
        original_image: prompt.originalImage,
        source: prompt.source,
        is_favorite: prompt.isFavorite
      };
      
      console.log('📤 发送数据到服务端:', serverData);
      
      const response = await fetch(`${CONFIG.getApiBaseUrl()}/prompts`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(serverData)
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const result = await response.json();
      console.log('📊 服务端保存结果:', result);
      
      if (result.success) {
        console.log('✅ 数据已成功保存到服务端');
        return { success: true, data: result.data };
      } else {
        console.log('❌ 服务端保存失败:', result.error);
        return { success: false, error: result.error };
      }
    } catch (error) {
      console.error('❌ 保存到服务端失败:', error);
      return { success: false, error: error.message };
    }
  }

}

// 初始化管理器
let promptManager;
document.addEventListener('DOMContentLoaded', () => {
  promptManager = new PromptManager();
});
